<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <div ref="box1">盒子1</div>
        <div ref="box2">盒子2</div> -->
        <!-- 如果给按钮1和按钮2添加相同的函数方法，执行函数时要区分是哪个标签触发的 -->
        <button @click="onClick">按钮1</button>
        <button @click="onClick">按钮2</button>
        <!-- 如果给按钮3和按钮4添加相同的函数方法，并且传递不同的参数 -->
        <button @click="Click(4)">按钮3</button>
        <button @click="Click(5)">按钮4</button>
        <!--如果是引入组件库，比如 el-input 的事件 @change 有自身的参数，想要再传递参数时,必须写成下面这种形式 -->
        <!-- 
            <el-input v-model="input.a" placeholder="请输入内容" @change="(val)=>{onChange(val, 'a')}"></el-input>
            <el-input v-model="input.b" placeholder="请输入内容" @change="(val)=>{onChange(val, 'b')}"></el-input>
        -->
        <!-- 也可以通过ref来区分标签(DOM节点),这种方式就不是函数传参的时候传递标签，就可以在任何函数或生命周期中拿到标签 -->
        <div ref="box1" @click="onBox('a')">盒子1</div>
        <div ref="box2" @click="onBox('b')">盒子2</div>

    </div>
</body>
<script>
    new Vue({
        el:'#app',
        mounted(){
            // 在生命周期中：通过 ref 获取DOM节点
            console.log(this.$refs.box1) // <div id="box1">盒子</div>
            console.log(this.$refs.box2) // <div>盒子2</div>
            this.$refs.box2.onclick = ()=>{
                console.log('盒子2的点击事件')
            }
        },
        methods:{
            onClick () {
                console.log(event.target) // 此时：点击按钮1时输出 <button>按钮1</button> ; 点击按钮2时输出 <button>按钮2</button>
            },
            Click (a) {
                console.log(a)
            },
            onBox (val) {
                console.log(val) // 点击盒子1时val是a, 点击盒子2时 val是b
                val == 'a' ? console.log(this.$refs.box1) : console.log(this.$refs.box2)
            }
        }
    })
</script>
</html>